<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Apifox WebSocket测试指南</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        pre {
            background-color: #f5f5f5;
            padding: 10px;
            border-radius: 5px;
            overflow: auto;
        }
        .note {
            background-color: #ffffd0;
            padding: 10px;
            border-left: 4px solid #ffcc00;
            margin: 10px 0;
        }
        .error {
            background-color: #ffe0e0;
            padding: 10px;
            border-left: 4px solid #ff0000;
            margin: 10px 0;
        }
        h2 {
            margin-top: 30px;
            border-bottom: 1px solid #ddd;
            padding-bottom: 5px;
        }
        code {
            background-color: #f0f0f0;
            padding: 2px 4px;
            border-radius: 3px;
        }
    </style>
</head>
<body>
    <h1>Apifox WebSocket测试指南</h1>
    
    <div class="note">
        <strong>注意：</strong> 使用Apifox测试WebSocket时，必须严格按照STOMP协议格式发送消息。以下是正确的格式示例。
    </div>
    
    <div class="error">
        <strong>重要更新！</strong> 每条STOMP消息必须以一个空行结尾，否则会出现"Frame must be terminated with a null octet"错误。
    </div>
    
    <h2>1. 连接WebSocket</h2>
    <p>在Apifox中创建WebSocket请求，输入以下URL：</p>
    <pre>ws://localhost:8080/ws</pre>
    
    <h2>2. 订阅消息 (SUBSCRIBE)</h2>
    <p>连接成功后，发送SUBSCRIBE命令，注意格式必须严格按照以下格式：</p>
    <pre>SUBSCRIBE
id:sub-0
destination:/user/cs001/queue/chat

</pre>
    
    <div class="note">
        <strong>重要：</strong> 
        <ul>
            <li>每个header之间不要有空格，格式为"key:value"</li>
            <li>header部分和空消息体之间必须有一个空行</li>
            <li><strong>消息必须以一个空行结尾</strong> (这点非常重要!)</li>
            <li>不要使用JSON格式，直接使用STOMP文本格式</li>
        </ul>
    </div>
    
    <h2>3. 创建会话 (SEND)</h2>
    <p>订阅成功后，发送SEND命令创建会话：</p>
    <pre>SEND
destination:/app/chat.createSession
content-type:application/json
content-length:57

{"customerId":"cs001","modelServiceName":"doubaoService"}
</pre>
    
    <div class="note">
        <strong>注意：</strong> 
        <ul>
            <li>content-length应该是实际JSON字符串的长度</li>
            <li>必须在JSON后面添加一个空行作为消息结束符</li>
        </ul>
    </div>
    
    <h2>4. 发送消息 (SEND)</h2>
    <p>创建会话成功后，使用返回的sessionId发送消息：</p>
    <pre>SEND
destination:/app/chat.sendMessage
content-type:application/json
content-length:123

{"sessionId":"这里填写实际的sessionId","customerId":"cs001","content":"你好","modelType":"normal","responseType":"stream"}
</pre>
    
    <h2>常见错误</h2>
    <ul>
        <li><strong>错误1: Frame must be terminated with a null octet</strong></li>
        <p>这个错误通常是因为消息没有以空行结尾。确保每条STOMP消息后面都有一个空行。</p>
        
        <li><strong>错误2: 使用JSON格式而非STOMP格式</strong></li>
        <pre>{
  "headers": {
    "id": "sub-0",
    "destination": "/user/cs001/queue/chat"
  }
}</pre>
        <p>这是错误的格式，不符合STOMP协议规范，会导致连接错误。</p>
        
        <li><strong>错误3: 没有收到返回的sessionId</strong></li>
        <p>确保订阅消息正确，订阅地址应该是 <code>/user/cs001/queue/chat</code>，而不是其他地址。</p>
    </ul>
    
    <h2>消息发送与接收流程</h2>
    <ol>
        <li><strong>连接WebSocket</strong>: <code>ws://localhost:8080/ws</code></li>
        <li><strong>订阅个人队列</strong>: 通过SUBSCRIBE命令订阅 <code>/user/cs001/queue/chat</code></li>
        <li><strong>创建会话</strong>: 发送创建会话请求到 <code>/app/chat.createSession</code></li>
        <li><strong>接收会话创建响应</strong>: 系统会发送包含sessionId的消息到你订阅的队列</li>
        <li><strong>发送聊天消息</strong>: 使用收到的sessionId发送消息到 <code>/app/chat.sendMessage</code></li>
        <li><strong>接收机器人回复</strong>: 机器人的回复会发送到你订阅的队列</li>
    </ol>
    
    <h2>示例完整消息序列</h2>
    <h3>1. 订阅 (必须先订阅才能收到响应)</h3>
    <pre>SUBSCRIBE
id:sub-0
destination:/user/cs001/queue/chat

</pre>

    <h3>2. 创建会话</h3>
    <pre>SEND
destination:/app/chat.createSession
content-type:application/json
content-length:57

{"customerId":"cs001","modelServiceName":"doubaoService"}
</pre>

    <h3>3. 接收到的会话创建响应 (示例)</h3>
    <pre>
MESSAGE
subscription:sub-0
message-id:msg-0
destination:/user/cs001/queue/chat
content-type:application/json;charset=UTF-8
content-length:178

{"type":"SESSION_CREATED","sessionId":"robot_12345678_cs001","firstMessage":"你好，我是客户robot_12345678，请问有什么可以帮助我的吗？"}
</pre>

    <h3>4. 发送消息</h3>
    <pre>SEND
destination:/app/chat.sendMessage
content-type:application/json
content-length:150

{"sessionId":"robot_12345678_cs001","customerId":"cs001","content":"我想买一部拍照功能好的手机","modelType":"normal","responseType":"stream"}
</pre>
</body>
</html> 